// 类组件实例
import React, {Component} from 'react';
import {CSSTransition} from "react-transition-group";
import styles from "./test.module.styl";
import {connect, ConnectedProps} from "react-redux";
import {RootState} from "../../redux/store";
import {addCount, setCount} from "../../redux/actions/count";
import {getLogin} from "../../redux/actions/login";

class TSTest extends Component<PropsFromRedux> {
  render() {
    const {count, add, set, login, getLogin} = this.props;
    const handleClick = () => {
      if (count > 2) {
        set(0)
        console.log("isLogin:", login);
        getLogin()
      } else {
        add(1)
      }
    }
    return (
      <div>
        <CSSTransition in={count % 2 === 0} timeout={500} classNames={{
          enter: styles.slide,
          enterActive: styles.slideActive,
          enterDone: styles.slideDone,
        }}>
          {/*<div onClick={() => setCount(prevState => prevState + 1)} className={styles.box}>aa</div>*/}
          <div onClick={handleClick} className={styles.box}>aa</div>
        </CSSTransition>
      </div>
    );
  }
}

const mapState = (state: RootState) => ({
  count: state.sum.count,
  login: state.isLogin.login
})

const mapDispatch = {
  add: addCount,
  set: setCount,
  getLogin,
}

const connector = connect(mapState, mapDispatch);

// 定义react-redux传递过来的props类型
type PropsFromRedux = ConnectedProps<typeof connector>

export default connector(TSTest);
